<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <meta charset="utf-8">
    <title>IFE Task 5</title>
    <link rel="stylesheet" type="text/css" href="css/Task5.css">
</head>
<body>
<header>
    <img src="D:\Workspace\code\pic\logo.png">
    <nav>
        <ul>
            <li><a href="">导航链接一</a></li>
            <li><a href="">导航链接二</a></li>
            <li><a href="">导航链接三</a></li>
            <li><a href="">导航链接四</a></li>
        </ul>
    </nav>
</header>

<article>
    <h1>文章一级标题</h1>
    <h2>文章二级标题</h2>
    <p class="adress">文章作者 文章发表时间</p>
    <P class="firstline">这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，换行了<br>
    这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落,换行了<br>
    这是一个很长很长的段落，这是一个很长很长的段落，<a href="http://ife.baidu.com/">这里有一个连接到http://ife.baidu.com/</a>这是一个很长很长的段落，这是一个很长很长的段落，<b>这有个粗体字</b>这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，</p>
    <img src="https://img1.doubanio.com/view/photo/photo/public/p2293569209.jpg" alt="你的名字">
    <p class="firstline">这是一个很长很长的段落，这是一个很长很长的段落，<a href="http://ife.baidu.com/" target="_blank">这里有一个连接在新窗口打开http://ife.baidu.com/</a>这是一个很长很长的段落，这是一个很长很长的段落，<b>这有个粗体字</b>这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，</p>
</article>

<article>
    <h1>另一篇文章一级标题</h1>
    <h2>文章二级标题</h2>
    <p class="adress">文章作者 文章发表时间</p>
    <p class="firstline">这是一个很长很长的段落，这是一个很长很长的段落，<a href="http://ife.baidu.com/">这里有一个连接到http://ife.baidu.com/</a>这是一个很长很长的段落，这是一个很长很长的段落，<b>这有个粗体字</b>这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，</p>
    <img src="https://img3.doubanio.com/view/photo/photo/public/p2397141375.jpg" alt="你的名字" width="70%" height="40%">

    <ul id="nostyle">
        <li>列表项目一</li>
        <li>列表项目二</li>
        <li>列表项目三</li>
    </ul>
</article>

<article title="img">
    <h1>图片</h1>
    <figure>
        <figcaption>好看的图片</figcaption><img src="https://img1.doubanio.com/view/photo/photo/public/p2391418217.jpg" width="100%" height="80%" alt="你的名字">
    </figure>
    <figure>
        <figcaption>好看的图片</figcaption><img src="https://img1.doubanio.com/view/photo/photo/public/p2391418217.jpg" width="100%" height="80%" alt="你的名字">
    </figure>
    <figure>
        <figcaption>好看的图片</figcaption><img src="https://img1.doubanio.com/view/photo/photo/public/p2391418217.jpg" width="100%" height="80%" alt="你的名字">
    </figure>
    <figure>
        <figcaption>好看的图片</figcaption><img src="https://img1.doubanio.com/view/photo/photo/public/p2391418217.jpg" width="100%" height="80%" alt="你的名字">
    </figure>
    <figure>
        <figcaption>好看的图片</figcaption><img src="https://img1.doubanio.com/view/photo/photo/public/p2391418217.jpg" width="100%" height="80%" alt="你的名字">
    </figure>
    <figure>
        <figcaption>好看的图片</figcaption><img src="https://img1.doubanio.com/view/photo/photo/public/p2391418217.jpg" width="100%" height="80%" alt="你的名字">
    </figure>
    <figure>
        <figcaption>好看的图片</figcaption><img src="https://img1.doubanio.com/view/photo/photo/public/p2391418217.jpg" width="100%" height="80%" alt="你的名字">
    </figure>
    <figure>
        <figcaption>好看的图片</figcaption><img src="https://img1.doubanio.com/view/photo/photo/public/p2391418217.jpg" width="100%" height="80%" alt="你的名字">
    </figure>
    <figure>
        <figcaption>好看的图片</figcaption><img src="https://img1.doubanio.com/view/photo/photo/public/p2391418217.jpg" width="100%" height="80%" alt="你的名字">
    </figure>
    <figure>
        <figcaption>好看的图片</figcaption><img src="https://img1.doubanio.com/view/photo/photo/public/p2391418217.jpg" width="100%" height="80%" alt="你的名字">
    </figure>
</article>

<article>
    <h1>最后一篇文章一级标题</h1>
    <h2>文章二级标题</h2>
    <p class="adress">文章作者 文章发表时间</p>
    <ol>
        <li>排名一</li>
        <li>排名二</li>
        <li>排名三</li>
    </ol>
    <p>下面是一个表格，给表格加了一个border="1"好让你看出来是一个表格</p>
    <table border="1">
        <tr>
            <th>表头</th>
            <th>表头</th>
            <th>表头</th>
        </tr>
        <tr>
            <td>表内容单元格</td>
            <td>表内容单元格</td>
            <td><a href="">操作</a></td>
        </tr>
        <tr class="alt">
            <td >表内容单元格</td>
            <td>表内容单元格</td>
            <td><a href="">操作</a></td>
        </tr>
        <tr>
            <td>表内容单元格</td>
            <td>表内容单元格</td>
            <td><a href="">操作</a></td>
        </tr>
        <tr class="alt">
            <td>表内容单元格</td>
            <td>表内容单元格</td>
            <td><a href="">操作</a></td>
        </tr>
        <tr>
            <td>总计</td>
            <td colspan="2">1000</td>
        </tr>
    </table>
</article>

<aside>
    <h2>这里以后是一个侧栏，这是侧栏的标题</h2>
    <form action="/login" method="post">
        <div>
            <label>请输入邮箱地址：</label>
            <input type="text" name="email" value="这里是一个文本框">
            <p>邮箱地址按要求格式输入</p>
            <label class="tips" for="password1">请输入密码：</label>
            <input type="password" name="password" id="password1" value="这里是一个文本框"><br />
            <label for="password2">请重复输入密码：</label>
            <input type="password" name="password" id="password2" value="这里是一个文本框">
            <p>密码请为6-16位英文数字</p>
        </div>
        <div>
            <label class="detail">性别：</label>
            <input type="radio" name="sex" id="male" checked>
            <label for="male">男</label>
            <input type="radio" name="sex" id="female">
            <label for="female">女</label>
        </div>
        <div>
            <label  class="detail">城市：</label>
            <select name="city">
                <option value="北京">北京</option>
                <option value="上海">上海</option>
                <option value="广州">广州</option>
            </select>
        </div>
        <div>
            <label  class="detail">爱好：</label>
            <input type="checkbox" name="checkbox" id="sport">
            <label for="sport">运动</label>
            <input type="checkbox" name="checkbox" id="art">
            <label for="art">艺术</label>
            <input type="checkbox" name="checkbox" id="science">
            <label for="science">科学</label>
        </div>
        <div>
            <label  class="self_detail">个人描述：</label>
            <textarea name="message" rows="2" cols="25">这是一个多行描述框，输入您的个人描述</textarea>
        </div>

        <input class="button" type="submit" name="submit" value="确认提交">
    </form>
</aside>

<footer><b>版权所有&copy power by Ningersan</b></footer>
</body>
</html>
